<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加栏目</title>
    <link rel="stylesheet" href="../../static/plugins/layui/css/layui.css" media="all" th:href="@{/plugins/layui/css/layui.css}"/>
    <link rel="stylesheet" href="../../static/plugins/font-awesome/css/font-awesome.min.css" th:href="@{/plugins/font-awesome/css/font-awesome.min.css}">
</head>
<body>
<blockquote class="layui-elem-quote">
    <a onclick="window.location.reload();" style='cursor:pointer;display: inline-block'>
        <img src="../../static/images/refresh.png" height="20" th:src="@{/images/refresh.png}"/>
    </a>&nbsp;
    <a onclick="history.go(-1);" style="color:#009688; cursor:pointer;display: inline-block;margin:5px">栏目管理</a>><span style="display: inline-block;margin:5px">栏目添加</span>
</blockquote>
<div style="margin-left: 15px;">


    <!--/*@thymesVar id="entity" type="com.example.demo.navigation.bean.NavBean"*/-->
    <form class="layui-form" action="" th:action="@{/Admin/navigation/savenav}" method="post" th:object="${entity}">


        <input th:field="*{id}" th:if="*{id!=0}" type="hidden">
        <div class="layui-form-item margin-left">
        <div class="layui-inline">
            <label class="layui-form-label" id="jpushsys">栏目类型</label>

            <div class="layui-input-block">
                <select class="layui-form-select" th:field="*{type}" lay-filter="navtype" id="navtype">
                    <option value="0">一级菜单</option>
                    <option value="1">二级菜单</option>
                    <option value="2">三级菜单</option>
                </select>

            </div>

        </div>
        </div>

        <div class="layui-form-item margin-left">
            <div class="layui-inline">
                <label class="layui-form-label">一级菜单</label>
                <div class="layui-input-block">
                    <select class="layui-select" lay-search th:field="*{__*{type}==2?'parent.parentId':'parentId'__}"  id="navlevel_1"
                            lay-filter="navlevel_1" th:disabled="*{type>0}?false:true"
                            >
                        <option th:if="${parentlist == null}" th:text="暂无数据" th:value="0"></option>
                        <option th:each="pbean:${parentlist}" th:text="${pbean.title}" th:value="${pbean.id}" th:unless="${parentlist == null}"></option>
                    </select>
                </div>
            </div>


            <div class="layui-inline">
                <label class="layui-form-label">二级菜单</label>
                <div class="layui-input-block">
                    <select class="layui-select" lay-search th:field="*{parentId}" id="navlevel_2" th:disabled="*{type==2}?false:true">
                        <option th:text="暂无数据" th:value="0"></option>
                        <option th:each="pbean:${parentlist2}" th:text="${pbean.title}" th:value="${pbean.id}" th:unless="${parentlist2 == null}"></option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item margin-left">
            <div class="layui-inline">
                <label class="layui-form-label">栏目名称</label>
                <div class="layui-input-block">
                    <input type="text" name="title" autocomplete="off" placeholder="请输入栏目名称" class="layui-input" th:field="*{title}" lay-verify="required">
                </div>
            </div>
        </div>
        <div class="layui-form-item margin-left">
            <div class="layui-inline">
                <label class="layui-form-label">栏目链接</label>
                <div class="layui-input-block">
                    <input type="text" name="href" autocomplete="off" placeholder="请输入栏目链接" class="layui-input" th:field="*{href}">
                </div>
            </div>
        </div>
        <div class="layui-form-item margin-left">
            <div class="layui-inline">
                <label class="layui-form-label">栏目排序</label>
                <div class="layui-input-block">
                    <input type="text" name="sort" autocomplete="off" placeholder="请输入栏目排序" class="layui-input" th:field="*{sort}" lay-verify="number">
                </div>
            </div>
        </div>



        <div class="layui-form-item margin-left">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="../../static/plugins/layui/layui.js" th:src="@{/plugins/layui/layui.js}"></script>
<script th:inline="javascript">


    layui.use('form', function(){
        var form = layui.form();
        var $ = layui.jquery;
        form.on('select(navtype)',function (data) {
            var x = data.value;
            switch (x){
                case '0':
                    $("#navlevel_1").attr('disabled','disabled');
                    $("#navlevel_2").attr('disabled','disabled');
                    break;
                case '1':
                    $("#navlevel_1").attr('name','parentId');
                    $("#navlevel_1").removeAttr('disabled');
                    $("#navlevel_2").attr('disabled','disabled');
                    break;
                case '2':
                    $("#navlevel_1").removeAttr('name');
                    $("#navlevel_1").removeAttr('disabled');
                    $("#navlevel_2").removeAttr('disabled');
                    getNavData($("#navlevel_1").val())
                    break;
                default:
                    break;
            }
            form.render();

        });

            form.on('select(navlevel_1)', function (data) {
                getNavData(data.value);
            });

        function getNavData(data) {
            if ($("#navtype").val()=='2') {
                var x = data;
                var url = [[@{/Admin/navigation/nav/}]]+x;
                $.ajax({
                    type: 'GET',
                    url: url,
                    dataType: 'json',
                    success: function (d) {
                        var optionstring = "";
                        for (var i in d) {
                            var jsonObj = d[i];
                            optionstring += "<option value=\"" + jsonObj.id + "\" >" + jsonObj.title + "</option>";
                        }
                        $("#navlevel_2").html("<option value='0'>请选择...</option> " + optionstring);
                        form.render();

                    }
                });
            }
        }


        form.on('submit(submit)',function () {

            if ($("#navtype").val()=='1'&&$("#navlevel_1").val()=='0')
            {
                layer.msg("请选择父级菜单");
                return false;
            }



            if ($("#navtype").val()=='2'&&$("#navlevel_2").val()=='0')
            {
                layer.msg("请选择父级菜单");
                return false;
            }
            return true
        })
    });
</script>
</body>
</html>